<template>
  <div class="BaiDuMap user_Overview">
    <baidu-map
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
      @ready="handler"
      style="width: 100%; height: 100%"
    >
      <!-- 缩放组件 -->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
      <!-- 距离 -->
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
      <!-- 地图类型组件 -->
      <bm-map-type
        :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']"
        anchor="BMAP_ANCHOR_TOP_LEFT"
      ></bm-map-type>
<!-- 集控器设备 -->
      <bml-marker-clusterer :averageCenter="true" :minClusterSize="2">
          <bm-marker
            v-for="marker of devmarkers"
            :key="marker.id"
            :position="{ lng: marker.longitude, lat: marker.latitude }"
            @mouseover="lookDetail(marker)"
            @mouseout="defineDetail(marker)"
            :icon="{url:require(`../../../assets/image/streetlight-icon${marker.online}.png`), size: {width:64, height: 64},imageSize:{width:20,height:20}}"
          >
            <!-- 信息窗口 -->
            <bm-info-window
              :title="infoWindow.address"
              :position="{ lng: infoWindow.lng, lat: infoWindow.lat }"
              :show="marker.showFlag"
              @close="infoWindowClose(marker)"
              @open="infoWindowOpen(marker)"
            >
            </bm-info-window>
          </bm-marker>
      </bml-marker-clusterer>
<!-- 单灯设备 -->
      <!-- <bml-marker-clusterer :averageCenter="true" :minClusterSize="1"> -->
          <bm-marker
            v-for="marker of lamplist"
            :key="marker.id"
            :position="{ lng: marker.longitude, lat: marker.latitude }"
            @mouseover="lookDetail(marker)"
            @mouseout="defineDetail(marker)"
            :icon="{url:require(`../../../assets/image/marker-icon${marker.online}.png`), size: {width:64, height: 64},imageSize:{width:20,height:20}}"
          >
            <!-- 信息窗口 -->
            <bm-info-window
              :title="infoWindow.deviceName    "
              :position="{ lng: infoWindow.lng, lat: infoWindow.lat }"
              :show="marker.showFlag"
              @close="infoWindowClose(marker)"
              @open="infoWindowOpen(marker)"
            >
            </bm-info-window>
          </bm-marker>
      <!-- </bml-marker-clusterer> -->
    </baidu-map>
  </div>
</template>

<script>
import stylemap from './custom_map_config.json'
import { BmlMarkerClusterer } from "vue-baidu-map";
import {
  Mapdatas,
  getMapdevs,
  getMapdatas,
  getMapStatistics,
  getMaps
} from "../../../request/api";

export default {
  data() {
    return {
     
      // 单灯设备
      lamplist:[],
      // 中心坐标
      centerLng: "",
      centerlat: "",
      centerzoom: "",
      // 设备点击详情相关
      devaddress: "",
      infoshow: false,
      // 统计数据
      statData: {},
      lampshow: true,
      devshow: true,
      // 在线离线数据
      devNums: {},
      a: "marker-icon1.png",
      devmarkers: [],
      // 测试数据
      // markers: [],
      infoWindow: {},
      active: false,
      center: { lng: 104.068594, lat:33.687528 },
      zoom: 5
    };
  },

  created() {
    this.getdevstats();
  },
  mounted() {
    this.getMapLists(); //集控器
    setTimeout(d => {
      this.addPoints(); //单灯点
    }, 1000);
  
  },
  methods: {
    clickHandler(e) {
      this.infoshow = true;
      this.devaddress = e.point.address;
      this.devname = e.point.deviceName;
      // console.log(e,'ee');
      // alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat},${e.point.address},${e.point.online}`);
    },
    // 单灯地图信息
    addPoints() {
      Mapdatas().then(d => {
        if(d.code == "0000"){
          this.lamplist = d.data
        }
      }).catch(e => {
          console.log("接口调用失败");
        });;
    },
    // 统计数据信息 中心坐标 缩放比例
    getdevstats() {
      getMapStatistics().then(d => {
        if (d.code == "0000") {
          this.statData = d.data;
          this.center.lng = this.statData.centerLocationLongitude;
          this.center.lat = this.statData.centerLocationLatitude;
          this.zoom = this.statData.mapLevel
          // console.log(this.centerLng,this.centerlat);
        }
      });
    },
    // 集控器地图信息
    getMapLists() {
      getMapdatas()
        .then(d => {
          if (d.code == "0000") {
            this.devmarkers = d.data;
          }
        })
        .catch(e => {
          console.log("接口调用失败");
        });
    },
    // 移出
    defineDetail(marker) {
      marker.showFlag = false;
    },
    // 鼠标移入点坐标赋值
    lookDetail(marker) {
      marker.showFlag = true;
      this.infoWindow = marker;
    },
    // 关闭弹窗
    infoWindowClose(marker) {
      marker.showFlag = false;
    },
    // 打开弹窗
    infoWindowOpen(marker) {
      marker.showFlag = true;
    },

    // 绘制地图
    handler({ BMap, map }) {
          this.center.lng = this.statData.centerLocationLongitude;
          this.center.lat = this.statData.centerLocationLatitude;
          this.zoom = this.statData.mapLevel
      //默认主题 normal blueSky  light  dark  googlelite  grassgreen  midnight  pink  bluish  grayscale
          map.setMapStyleV2({styleId:"489468e3bf9301f289a0ef1e7ba8d7db"})
          // let mapStyle={style:"midnight"}
        // let mapStyle={style:"midnight"}
        // map.setMapStyle(mapStyle);
     
      // console.log(BMap,map);
      // console.log(this.centerLng,this.centerlat);
      // this.center.lng = this.centerLng;
      // this.center.lat = this.centerlat;
      // this.center.lng = 120.135018;
      // this.center.lat = 30.282992;
      // this.zoom = this.statData.mapLevel;
    }
  },
  components: {
    BmlMarkerClusterer
  }
};
</script>

<style>
/* 点击设备详情 */
.lampinfo {
  padding: 10px;
  background: #999;
  text-align: center;
  border-radius: 10%;
  width: 180px;
  height: 120px;
  position: fixed;
  z-index: 10;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.devshow {
  padding: 10px;
  text-align: center;
  background: white;
  /* border: 2px solid black; */
  border-radius: 10%;
  width: 160px;
  height: 140px;
  position: fixed;
  z-index: 10;
  left: 225px;
  top: 420px;
}
.devshow p {
  margin-top: 10px;
}
.box p {
  margin-top: 20px;
  font-size: 14px;
  /* text-align: left; */
}
.box {
  padding: 10px;
  text-align: center;
  background: white;
  /* border: 2px solid black; */
  border-radius: 10%;
  width: 160px;
  height: 260px;
  position: fixed;
  z-index: 10;
  left: 225px;
  top: 135px;
}
.BaiDuMap {
  width: 100%;
  height: 100%;
}
</style>
